import { Card, Cascader, Col, Row,Tabs } from 'antd'
import React, { useEffect, useState } from 'react'
import server from '../../../utils/request'
const { TabPane } = Tabs;
function Params() {
    const [options, setOptions] = useState([])
    // const options = [
    //     {
    //       value: 'zhejiang',
    //       label: 'Zhejiang',
    //       children: [
    //         {
    //           value: 'hangzhou',
    //           label: 'Hangzhou',
    //           children: [
    //             {
    //               value: 'xihu',
    //               label: 'West Lake',
    //             },
    //           ],
    //         },
    //       ],
    //     },
    //     {
    //       value: 'jiangsu',
    //       label: 'Jiangsu',
    //       children: [
    //         {
    //           value: 'nanjing',
    //           label: 'Nanjing',
    //           children: [
    //             {
    //               value: 'zhonghuamen',
    //               label: 'Zhong Hua Men',
    //             },
    //           ],
    //         },
    //       ],
    //     },
    //   ];

    const getOptions = async () => {
        const res = await server.get("/categories")
        setOptions(res.data)
    }
    useEffect(() => {
        getOptions()
    }, [])
    function onChange(value) {
        console.log(value);
    }
    function callback(key) {
        console.log(key);
      }
    return (
        <div>
            <Card>
                Params
                <Row>
                    <Col span={6}>
                        <span>选择商品的分类：</span>
                        <Cascader
                            options={options}
                            onChange={onChange}
                            placeholder="Please select"
                            allowClear
                            fieldNames={{
                                label: "cat_name",
                                value: "cat_id",
                                children: "children"
                            }}
                        />;
                    </Col>
                </Row>
                <Tabs defaultActiveKey="1" onChange={callback}>
                    <TabPane tab="动态参数" key="1">
                    
                    </TabPane>
                    <TabPane tab="静态属性" key="2">
                    
                    </TabPane>
                </Tabs>
            </Card>
        </div>
    )
}

export default Params
